<template>
  <!-- 问题详情 -->
  <div class="problem">
    <!-- <div class="help_center">帮助中心</div> -->
    <div class="problem_title">{{ content.title }}</div>
    <div class="problem_text" v-if="content.videoUrl">
      <video :src="content.videoUrl" controls style="width:50%;"></video>
    </div>
    <div
      class="problem_text"
      v-if="content.answer"
      v-html="content.answer"
    ></div>
  </div>
</template>

<script>
export default {
  created() {
    // this.id = this.$route.params.id;
    this.questionDetail(this.$route.query.id);
  },
  data() {
    return {
      id: "",
      content: "",
    };
  },
  methods: {
    async questionDetail(id) {
      let params = { id };
      let res = await this.$apiFun.questionDetail(params);
      // this.supportList = res.result.rows;
      if (res.code == 200) {
        this.content = res.result;
      }
    },
  },
  watch: {
    "$route.query.id"(newId) {
      if (newId) {
        if (this.$route.name == "problem_details") {
          this.questionDetail(newId);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.problem {
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem 1rem;
  font-family: Microsoft YaHei;
  .help_center {
    text-align: left;
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
  }
  .problem_title {
    font-size: 0.2rem;
    font-weight: bold;
    color: #333333;
    margin: 0.3rem 0rem;
    text-align: left;
  }
  .problem_text {
    font-size: 0.2rem;
    text-align: left;
    p {
      width: 10rem;
    }
  }
}
</style>

<style lang="less">
.problem_text {
  p {
    img {
      max-width: 100%;
    }
  }
}
</style>